<template>
	<view class="container" :data-theme="theme">
		<view class="header">
			<view class="bg_color" style="padding: 24rpx 24rpx;">
				<!-- 搜索框 -->
				<u-search v-model="selectProductPageParams.productName" @custom="searchProductName"
					@search="searchProductName" placeholder="请输入商品名称" actionText="搜索" :actionStyle="{color:'#FFF'}"
					shape="square" style="flex: none;"></u-search>

			</view>
			<view class="tab_header">
				<!-- 下拉 -->
				<view style="display: flex;flex-flow: row;">
					<picker @change="channelChange" @cancel="channelCancel" @click="channelClick" :value="channelIndex"
						:range="channelList" range-key="name" style="display: flex;">
						<view style="display: flex;">
							<view style="font-size: 14px;margin-right: 6rpx;">{{ channelList[channelIndex].name }}
							</view>
							<u-icon :name="channelShow ? 'arrow-down-fill' : 'arrow-up-fill'" size="12"></u-icon>
						</view>
					</picker>

				</view>
			</view>
		</view>
		<scroll-view class="body" scroll-y="true" @scrolltolower="rollHandle">
			<view class="card_item" v-for="item in productList" :key="item.id">
				<view class="card_top">
					商家名称：{{item.merName}}
				</view>
				<view class="card_center">
					<u--image :showLoading="true" :src="item.productPicture" class="left" width="80px"
						height="80px"></u--image>
					<view class="right">
						<view>商品名称：{{item.productName}}</view>
						<view>商品渠道：{{item.productChannel}}</view>
						<view>商品价格：￥{{item.productPrice}}</view>
						<view>备注：{{item.postscript}}</view>
					</view>
				</view>
				<view class="content-footer" style="margin-top: 20rpx;padding-bottom: 10rpx;">
					<button type="primary" style="margin:10px ;height:32px; font-weight: bold;" class="bg_color"
						@click="deleteClick(item)">删除</button>
				</view>
			</view>

			<u-empty v-if="!productList.length" style="padding-top: 50%;"
				icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			<uni-load-more v-else :status="moreStatus"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	import {
		selectProductPageApi,
		deleteProductApi
	} from "@/api/bagPrice.js"
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				selectProductPageParams: {
					productName: '', // 商品名称
					channel: '', //商品渠道
				},
				// 渠道选择
				allList: [{
					name: '全部',
					value: null
				}],
				channelList: [{
						name: '全部',
						value: null
					}, {
						name: '多多买菜',
						value: 1
					},
					{
						name: '美团买菜',
						value: 2
					},
					{
						name: '美菜',
						value: 3
					}
				],
				// 渠道三角显示
				channelShow: false,
				// 渠道下表
				channelIndex: 0,
				selectProductPageParams: {
					current: 1,
					size: 20,
				},
				// 获取的商品数据
				productList: [],
				// 是否可以加载的状态
				moreStatus: 'more'

			}
		},
		onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.selectProductPage()
		},
		methods: {
			// 下拉改变
			channelChange(e) {
				this.channelIndex = e.detail.value
				this.selectProductPageParams.channel = e.detail.value
				this.selectProductPage(true)
			},

			// 取消选择渠道
			channelCancel() {
				this.channelShow = false
			},

			// 渠道点击
			channelClick() {
				this.channelShow = true
			},
			// 搜索商品名
			searchProductName(val) {
				this.selectProductPageParams.productName = val
				this.selectProductPage(true)
			},

			// 滚动事件
			rollHandle() {
				if (this.moreStatus == 'more') {
					this.selectProductPageParams.current++
					this.selectProductPage()
				}
			},
			// 删除功能
			async deleteClick(item) {
				uni.showModal({
					title: '提示',
					content: `您确认删除"${item.productName}"吗?`,
					showCancel: true,
					confirmText: '确定',
					success: async (res) => {
						if (res.confirm) {
							await this.deleteProduct({
								id: item.id
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消删除',
								icon: 'none',
								duration: 1500
							});
						}
					},
				});

			},

			// 查询商户上传过的产品
			async selectProductPage(status) {
				try {
					this.moreStatus = 'loading'
					if (status) {
						this.productList = []
						this.selectProductPageParams.current = 1
						this.selectProductPageParams.size = 20
					}
					let result = await selectProductPageApi(this.selectProductPageParams)
					if (result.code == 200) {
						let items = result.data.records
						if (items.length > 0) {
							if (items.length < this.selectProductPageParams.size) {
								this.moreStatus = 'noMore'
							} else {
								this.moreStatus = 'more'
							}
							this.productList.push(...items)
						} else {
							this.moreStatus = 'noMore'
						}
					} else {
						uni.showToast({
							title: result.message,
							icon: 'none',
							duration: 1500
						});
					}
				} catch (e) {
					//TODO handle the exception
					console.log()
				}
			},


			// 删除商户上传过的产品
			async deleteProduct(params) {
				try {
					let result = await deleteProductApi(params)
					if (result.code == 200) {
						this.selectProductPage()
						uni.showToast({
							title: '删除成功',
							duration: 1500,
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: result.message,
							icon: 'none',
							duration: 1500
						});
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}


	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #eee;

		.header {

			.tab_header {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				background-color: white;
				padding: 15px;
				margin-bottom: 20px;
			}
		}

		.body {

			flex: 1;
			min-height: 200px;

			.card_item {
				background-color: white;
				display: flex;
				flex-direction: column;
				margin: 0 10px;
				margin-bottom: 20px;
				border-radius: 5px;

				.card_top {
					padding: 10px;
					border-bottom: 1px solid #eee;
				}

				.card_center {
					display: flex;
					padding: 10px;
					border-bottom: 1px solid #eee;

					.left {
						width: 70px;
						height: 70px;
						margin-right: 20px;

					}

					.right {
						line-height: 25px;
					}
				}

				.card_bottom {
					padding: 10px;
				}
			}
		}

	}
</style>